<apes-header>
  <apes-button-list class="buttonList" [ctx]="ctx" [buttonBarMetadata]="buttonBar"
                    (click)="onEvent($event)"></apes-button-list>
</apes-header>

<apes-content>
  <apes-card [apesBordered]="false">
    <!-- 查询条件(固定) -->
    <div class="boxShowFlex">
      <!-- 小方块查询条件 -->
      <div apes-col apesSpan="24" style="padding: 0;">
        <ul class="box-ul">
          <li class="box-li" *ngFor="let list of queryList" (click)="btnChange(list['KEY'])"
              [class.box-foc]="list['KEY'] === query">
            <a href="javascript:void(0)">{{ list['TITLE'] }}<br/>{{ list['LABLE'] }}</a>
          </li>
        </ul>
      </div>
      <!-- 车辆状态 -->
      <div apes-col apesSpan="8">
        <span>车辆状态</span>
        <ng-select style="width: 210px; display: inline-block;"
                   [items]="arrJD"
                   bindLabel="label"
                   bindValue="key"
                   clearAllText [placeholder]="'选填'" [(ngModel)]="ngJD" [notFoundText]="'无法找到'" typeToSearchText>
        </ng-select>
      </div>
      <!-- 定损进度 -->
      <div apes-col apesSpan="8">
        <span>定损进度</span>
        <ng-select style="width: 210px; display: inline-block;"
                   [items]="fixedList"
                   bindLabel="DSJDMC"
                   bindValue="DSJDID"
                   clearAllText [placeholder]="'选填'" [(ngModel)]="fixedID" [notFoundText]="'无法找到'" typeToSearchText>
        </ng-select>
      </div>
      <!-- 车在哪 -->
      <div apes-col apesSpan="8">
        <span>车在哪</span>
        <ng-select style="width: 210px; display: inline-block;"
                   [items]="carList"
                   bindLabel="CARPLACEMC"
                   bindValue="CARPLACEID"
                   clearAllText [placeholder]="'选填'" [(ngModel)]="carID" [notFoundText]="'无法找到'" typeToSearchText>
        </ng-select>
      </div>
      <!-- 车牌号码 -->
      <div apes-col apesSpan="8">
        <span>车牌</span>
        <input type="text" apes-input placeholder="请输入车牌号码" [(ngModel)]="cphmName" style="width: 210px;">
      </div>
      <!-- 门店 -->
      <div apes-col apesSpan="8">
        <span>门店</span>
        <ng-select style="width: 210px; display: inline-block;"
                   clearAllText
                   [disabled]="deptId ? true : false"
                   [items]="arrNXMD"
                   bindLabel="MDMC"
                   bindValue="MDID"
                   [placeholder]="'选填'" [notFoundText]="'无法找到'" typeToSearchText [(ngModel)]="ngNXMD">
        </ng-select>
      </div>
      <!-- 状态1 -->
      <div apes-col apesSpan="8">
        <div>
          <label apes-col apesSpan="5" apes-checkbox [(ngModel)]="checkOne">定损车</label>
          <label apes-col apesSpan="5" apes-checkbox [(ngModel)]="checkTwo">返修车</label>
          <label apes-col apesSpan="5" apes-checkbox [(ngModel)]="checkThe">年审车</label>
          <label apes-col apesSpan="5" apes-checkbox [(ngModel)]="checkFro">水泡车</label>
        </div>
      </div>
    </div>

    <!-- 查询条件（外加） -->
    <div class="boxShow" apes-row [ngStyle]="{ display: hidn }">
      <!-- 接车时间 -->
      <div apes-col apesSpan="8">
        <div>
          <span>接车时间</span>
          <div class="boxDiv">
            <apes-range-picker [(ngModel)]='mdjcTime' [apesFormat]="'yyyy-MM-dd'"></apes-range-picker>
          </div>
        </div>
        <p [ngStyle]="{ display: hind }"><i class="anticon anticon-exclamation-circle-o"></i> 必填！最大时间为一个月 </p>
      </div>
      <!-- 交车时间 -->
      <div apes-col apesSpan="8">
        <div>
          <span>交车时间</span>
          <div class="boxDiv">
            <apes-range-picker [(ngModel)]='yjjcTime' [apesFormat]="'yyyy-MM-dd'"></apes-range-picker>
          </div>
        </div>
        <p [ngStyle]="{ display: hindd }"><i class="anticon anticon-exclamation-circle-o"></i> 输入最大时间段为一个月 </p>
      </div>
      <!-- 公司 -->
      <div apes-col apesSpan="8">
        <span>公司</span>
        <ng-select style="width: 210px; display: inline-block;"
                   typeToSearchText
                   [disabled]="deptId ? true : false"
                   [items]="companyData"
                   multiple="true"
                   bindLabel="name"
                   bindValue="id"
                   placeholder="选填，可多选"
                   [(ngModel)]="companyList"
                   [notFoundText]="'无法找到'"
                   (change)="getNxmdData()">
        </ng-select>
      </div>
      <!-- 销售组 -->
      <div apes-col apesSpan="8">
        <span>销售组</span>
        <ng-select style="width: 210px; display: inline-block;"
                   typeToSearchText
                   [items]="sale"
                   multiple="true"
                   bindLabel="XSZMC"
                   bindValue="XSZID"
                   placeholder="选填，可多选"
                   [(ngModel)]="saleID"
                   [notFoundText]="'无法找到'">
        </ng-select>
      </div>
      <!-- 服务类型 -->
      <div apes-col apesSpan="8">
        <span>服务类型</span>
        <ng-select style="width: 210px; display: inline-block;"
                   [items]="arrFWLX"
                   bindLabel="FWLXMC"
                   bindValue="FWLXID"
                   clearAllText [placeholder]="'选填'" [(ngModel)]="ngFWLX" [notFoundText]="'无法找到'" typeToSearchText>
        </ng-select>
      </div>
      <!-- 年审进度 -->
      <div apes-col apesSpan="8">
        <span>年审进度</span>
        <ng-select style="width: 210px; display: inline-block;"
                   [items]="annualList"
                   bindLabel="NSJDMC"
                   bindValue="NSJDID"
                   clearAllText [placeholder]="'选填'" [(ngModel)]="annualID" [notFoundText]="'无法找到'" typeToSearchText>
        </ng-select>
      </div>
      <!-- 汽车厂牌 -->
      <div apes-col apesSpan="8">
        <span>汽车厂牌</span>
        <input type="text" apes-input placeholder="请输入汽车厂牌" [(ngModel)]="carBrands" style="width: 210px;">
      </div>
      <!-- 状态2 -->
      <div apes-col apesSpan="8">
        <div>
          <label apes-col apesSpan="12" apes-checkbox [(ngModel)]="checkFor">只显示已完工交车</label>
        </div>
      </div>

    </div>
    <!-- 显示内容 -->
    <div apes-row apesGutter="24" apesSpan="16">

      <!-- 左侧 数据展示 -->
      <div>
        <ag-grid-angular #grid
                         style="width: 100%;" [ngStyle]="{ height: height }" class="ag-theme-balham"
                         enableColResize="true"
                         enableSorting="true"
                         enableFilter="true"

                         suppressLoadingOverlay="true"
                         [modules]="modules"
                         [rowData]="rowData"
                         [gridOptions]="gridOptions"
                         [columnDefs]="columnDefs"
                         [pinnedBottomRowData]="pinnedBottomRowData"
                         [getContextMenuItems]="getContextMenuItems"
                         [rowClassRules]="rowClassRules">
        </ag-grid-angular>
      </div>
    </div>

    <ng-template #carInfo>
      <!--<car-list [parmes]="data"></car-list>-->
    </ng-template>
  </apes-card>
</apes-content>
